<template>
  <view class="container">
    <view class="title">
      我在群里的名称
    </view>
    <view class="text">
      昵称修改后,只会在此群内显示,群内成员
      都可以看见。
    </view>

    <view class="middle">
      <image src="../../static/message/nine_friend.png" style="width: 120rpx; height: 120rpx;" mode=""></image>
      <input type="text" placeholder="我的昵称">
      <image src="../../static/message/cuo.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
    </view>
    <view class="button">
      <u-button text="提交" type="error" style="margin-top: 70%; width: 50%; border-radius: 20rpx;"></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style lang="scss">
  .container {
    padding-top: 30%;
  }

  .title {
    color: rgb(51, 51, 51);
    text-align: center;
    font-family: Noto Sans SC;
    font-size: 44rpx;
    font-weight: 500;
    margin-bottom: 30rpx;
  }

  .text {
    width: 80%;
    margin: 0 auto 30rpx;
    font-size: 35rpx;
    text-align: center;
    color: rgb(150, 150, 150);
  }

  .middle {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 2% 8%;

    input {
      margin: 0 30rpx;
    }
  }
</style>